<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul{
            list-style: none;}
           #app li{
                width: 500px;
                padding:10px;
                margin:10px;
                border:1px solid #ccc;
                height: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>购物车</h2>
        <ul>
            <template v-for="(v,i) in goods">
                <li>
                    <span>{{i}}</span>
                    <span>{{v.name}}</span>
                    <span>￥{{v.pirce}}</span>
                    <span>{{v.count}}</span>
                    <span>{{v.dessc}}</span>
                    <button @click="add(i)">增加数量</button>
                    <!-- <button @click="minus(v)" v-bind:disabled="v.count==0">减少数量</button> -->
                    <button @click="del(i)">删除</button>
                </li>

            </template>
        </ul>
        <h3>总价格:{{total()}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm =new Vue({
        el:"#app",
        data:{
            index:0,
            goods:[{name:"apple",pirce:5,count:6,dessc:"desc"},
            {name:"orange",pirce:6,count:6,dessc:"desc"},
            {name:"pear",pirce:4,count:4,dessc:"desc"},
            {name:"banana",pirce:7,count:6,dessc:"desc"},
            ]
        },
        methods:{
            add:function(i){
                this.goods[i].count++;
            },
            minus:function(item){
               item.count--;
            },
            del:function(i){
               this.goods.splice(i,1);
            },
            total:function(){
                let sum=0;
                for(let i=0;i<this.goods.length;i++)
                    sum+=this.goods[i].pirce*this.goods[i].count;
                    return sum;
            }
        },
        computed:{}
    });
    </script>
</body>
</html>